<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <script src="./js/swiper.js"></script>
  <script src="./js/swiper.min.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <title>首页</title>
</head>
<body>
  <audio src="./static/audio.mp3" autoplay="true" loop id="bgMusic">
    您的浏览器不支持 audio 标签。
  </audio>
  <!-- 版心 -->
  <div class="box" id="box">
    <!-- 头部 -->
    <div class="header">
      <!-- logo -->
      <img src="./images/logo.png" alt="">
      <!-- 导航栏 -->
      <div class="link">
        <div><a href="#">首页</a></div>
        <span class="line"></span>
        <div><a href="#">成功案例</a></div>
        <span class="line"></span>
        <div><a href="#">关于创意</a></div>
        <span class="line"></span>
        <div><a href="#">在线咨询</a></div>
        <span class="line"></span>
        <div><a href="#">会员咨询</a></div>
        <span class="line"></span>
        <div><a href="#">会员登录</a></div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/img1.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="./images/img2.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="./images/img3.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="./images/img4.jpg" alt="" srcset="">
        </div>
        <div class="swiper-slide">
          <img src="./images/img5.jpg" alt="" srcset="">
        </div>
      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <!-- 颈部 -->
    <div class="nav">
      <div class="img">
        <img src="./images/nav1.jpg" alt="" srcset="">
      </div>
      <div class="img">
        <img src="./images/nav2.jpg" alt="" srcset="">
      </div>
      <div class="img">
        <img src="./images/nav3.jpg" alt="" srcset="">
      </div>
      <div class="img">
        <img src="./images/nav4.jpg" alt="" srcset="">
      </div>
      <div class="img">
        <img src="./images/nav5.jpg" alt="" srcset="">
      </div>
    </div>
    <!-- 主体 -->
    <div class="body">
      <!-- 五边形 -->
      <div class="pentagon"></div>
      <!-- 标题 -->
      <h2>EXHIBITION</h2>
      <!-- 案例展示 -->
      <div class="order">
        <span class="line-title"></span>
        <span class="txt">产品清单</span>
        <span class="line-title"></span>
      </div>
      <!-- 简介 -->
      <div class="desc">
        <b>服务项目：</b>
        <span>标志设计；LOGO设计；Vi设计；画册设计；海报设计；地产宣传；户外广告；包装设计；ICON设计；网页设计；模板建站；定制网站；界面设计；H5页面设计；网店装修；CAD效果图......</span>
      </div>
      <!-- 设计模块图 -->
      <div class="link-img">
        <!-- 第一块 -->
        <div class="link-img-box">
          <div class="img">
            <img src="./images/body1.png" alt="">
          </div>
          <div class="text">
            <span class="title">品牌设计</span>
            <br>
            <span class="desc">BRAND DESIGN</span>
          </div>
        </div>
        <!-- 第二块 -->
        <div class="link-img-box">
          <div class="img">
            <img src="./images/body2.png" alt="">
          </div>
          <div class="text">
            <span class="title">品牌设计</span>
            <br>
            <span class="desc">BRAND DESIGN</span>
          </div>
        </div>
        <!-- 第三块 -->
        <div class="link-img-box">
          <div class="img">
            <img src="./images/body3.png" alt="">
          </div>
          <div class="text">
            <span class="title">品牌设计</span>
            <br>
            <span class="desc">BRAND DESIGN</span>
          </div>
        </div>
        <!-- 第四块 -->
        <div class="link-img-box">
          <div class="img">
            <img src="./images/body4.png" alt="">
          </div>
          <div class="text">
            <span class="title">品牌设计</span>
            <br>
            <span class="desc">BRAND DESIGN</span>
          </div>
        </div>
        <!-- 第五块 -->
        <div class="link-img-box">
          <div class="img">
            <img src="./images/body5.png" alt="">
          </div>
          <div class="text">
            <span class="title">品牌设计</span>
            <br>
            <span class="desc">BRAND DESIGN</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="foot">
      <!-- 五边形 -->
      <div class="pentagon"></div>
      <!-- 标题 -->
      <div class="title">
        <h2>ABOUT</h2>
        <h2 class="red">US</h2>
      </div>
      <!-- 关于我们 -->
      <div class="order">
        <span class="line-title"></span>
        <span class="txt">关于我们</span>
        <span class="line-title"></span>
      </div>
      <!-- 简介 -->
      <div class="desc">
        <span class="title2">
          我们秉承“工匠精神”，做最精致的设计
        </span>
        <br>
        <span>
          我们是完美主义者，要求自己的每一次设计都是很完美。我们坚持专业高水准的服务标准，致力成为您的事业伙伴，我们珍重并以真诚回报您给予的信任和期待，因为我们的价值来自于我们协助您创造价值。
        </span>
      </div>
      <!-- 优点 -->
      <div class="end">
        <span class="title"><b>我们敢比服务</b></span>
        <br>
        <span>所有服务项目一律满意为止</span>
        <br>
        <span class="title"><b>我们敢比价格</b></span>
        <br>
        <span>我们是以工作室的方式运作，我们的设计作品不包含公司运作成本，</span>
        <span>我们只会索要单纯的设计价值</span>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <!-- 五边形 -->
      <div class="pentagon"></div>
      <!-- 服务流程 -->
      <div class="order">
        <span class="line-title"></span>
        <span class="txt">服务流程</span>
        <span class="line-title"></span>
      </div>
      <!-- 标题 -->
      <div class="title">
        <h2>SERVICE</h2>
        <h2 class="red">PROCESS</h2>
      </div>
      <!-- 内容 -->
      <div class="desc">
        <span><a href="#">项目洽谈</a></span>
        <span><a href="#">根据需求报价</a></span>
        <span><a href="#">预付定金，开始设计</a></span>
        <span><a href="#">修改定稿，完成设计</a></span>
        <span><a href="#">该定稿，完成设计</a></span>
      </div>
    </div>
  </div>
  <!-- 底部黑色栏 -->
  <div class="black">
    <div class="text">
      <span>xx省xx市xx区xx路xx街道xx号</span>
      <span>Copyright</span>
      <span>2014-2017</span>
      <span>51自学网</span>
    </div>
  </div>
  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    // 点击内容播放音乐
    var box = document.getElementById("box")
    box.addEventListener("click",function () {
          var audio = document.getElementById('bgMusic');
            audio.play();/*播放*/
       });
  </script>
</body>
</html>

    